import React from 'react'
import './index.css'
import { Card, Button, Form, InputNumber,Input } from 'antd'

const Collect:React.FC= ()=>{

    const onFinish = (values: any) => {
        let {total} = values;
        console.log(total)
    };

    return (
        <div className='collect_main'>
            <Card title="图片采集" bordered={false}>
                <Form
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 10 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="采集总量"
                        name="total"
                        rules={[{ required: true, message: '请输入采集数量' }]}
                    >
                        <InputNumber
                            style={{width:'100%'}}
                            placeholder="请输入采集数量"/>
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                        <Button type="primary" htmlType="submit"> 开始采集 </Button>
                    </Form.Item>

                    <Form.Item
                        label="当前采集"
                    >
                        <Input
                            disabled
                            value={12}
                            style={{width:'100%'}}
                            placeholder="请输入采集数量"/>
                    </Form.Item>
                </Form>
            </Card>
            <Card title="异常报警信息" bordered={false}>
                <p className='warn'>dlsdjlkadjl</p>
                <p className='warn'>dlsdjlkadjl</p>
                <p className='warn'>dlsdjlkadjl</p>
            </Card>
        </div>
    )
}

export default Collect
